<template>
  <div>
    <!-- 领取记录 -->
    <Modal v-model:visible="isShow" :title="modalTitle" @close="closeModal">
      <div class="record_main">
        <div class="record_main_my" v-if="modalType == 'my'">
          <span
            >累计领取奖励
            <span class="color_y">
              {{ Intl.NumberFormat().format(redEnvelopeState.myRecordInfo?.total_money) }}
              元</span
            >
          </span>
          <span
            >待领取 
            <span class="color_y">
              {{
                Intl.NumberFormat().format(redEnvelopeState.myRecordInfo?.pending_money)
              }}元</span
            ></span
          >
        </div>

        <!-- <nut-table
          :columns="columns"
          :data="tableData"
          v-if="modalType == 'user'"
        ></nut-table> -->
        <div class="my_table">
          <div class="my_table_head">
            <span v-for="item in columns" :key="item.key" class="my_table_head_item">
              {{ item.title }}
            </span>
          </div>
          <div class="my_table_row_body">
            <div class="my_table_row" v-for="item in tableData" :key="item.key">
              <span class="my_table_row_item" v-if="modalType == 'user'">
                {{ item.receive_time }}
              </span>
              <span class="my_table_row_item" v-else>
                {{ item.level }}
              </span>
              <span class="my_table_row_item item_nickname" v-if="modalType == 'user'">
                {{ item.nickname }}
              </span>
              <span class="my_table_row_item item_money" v-else>
                {{ Intl.NumberFormat().format(item.money) }}
              </span>
              <span class="my_table_row_item item_money" v-if="modalType == 'user'">
                {{ item.money }}
              </span>
              <span
                v-else
                class="my_table_row_item"
                :style="{ color: item.status == 1 ? '#1EEAA9' : '#ffffff' }"
              >
                {{ item.status == 1 ? "已领取" : "未领取" }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { redEnvelopeState } from "../hooks";
const isShow = ref(false);
const modalType = ref("");
const modalTitle = ref("");
const tableData = computed(() => {
  return modalType.value == "my"
    ? redEnvelopeState.myRecordList
    : redEnvelopeState.allRecordList;
});

const columns = computed(() => {
  return modalType.value == "user"
    ? [
        {
          title: "时间",
          key: "receive_time",
          align: "center",
        },
        {
          title: "会员",
          key: "nickname",
          align: "center",
        },
        {
          title: "获得奖励",
          key: "money",
          align: "center",
        },
      ]
    : [
        {
          title: "内容",
          key: "level",
          align: "center",
        },
        {
          title: "金额",
          key: "money",
          align: "center",
        },
        {
          title: "状态",
          key: "status",
          align: "center",
        },
      ];
});

const closeModal = () => {};

const openMpdal = (type: any) => {
  modalTitle.value = type == "my" ? "我的领取记录" : "活动领取记录";
  modalType.value = type;
  isShow.value = true;
};
onMounted(() => {});

defineExpose({
  openMpdal,
});
</script>

<style lang="scss" scoped>
.record_main {
  padding: 14px 10px;
  &:deep() {
    .nut-table,
    .nut-table__main {
      border-radius: 8px;
      overflow: hidden;
      max-height: 500px !important;
      overflow: auto;
    }

    .nut-table__main__head {
      background-color: #394eff;
      color: #ffffff;
    }
    .nut-table__main__head__tr--border {
      border-color: transparent;
    }
    .nut-table__main__body__tr {
      color: #ffffff;
      &:nth-child(odd) {
        background-color: #1b1a44;
      } //奇数行
    }
    .nut-table__main__body__tr__td {
      &:last-child {
        color: #ed8302;
      }
    }
  }
  .record_main_my {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 16px;
    gap: 6px;
    .color_y {
      color: #ed8302;
    }
  }
}
.my_table {
  overflow: hidden;
  border: 0.5px solid #2d2a60;
}
.my_table_head {
  display: flex;
  height: 36px;
  align-items: center;
  background: #394eff;
  color: #ffffff;
  border-radius: 8px 8px 0px 0px;
  font-size: 12px;
  .my_table_head_item {
    flex: 1;
    text-align: center;
  }
}
.my_table_row_body {
  max-height: 400px;
  overflow-y: auto;
}
.my_table_row {
  display: flex;
  height: 44px;
  align-items: center;
  background-color: #131232;
  .my_table_row_item {
    flex: 1;
    text-align: center;
    color: #ffffff;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 0.5px solid #2d2a60;
  }
  .item_money {
    color: #ed8302;
  }
  .item_nickname {
    color: #ffffff;
  }
  &:nth-child(odd) {
    background-color: #1b1a44;
  }
}
</style>
